import React, { useRef, useEffect, useState } from 'react'; // 引入React核心库和常用Hook
import Peer from 'peerjs'; // 引入PeerJS库用于WebRTC通信
import styles from './viewer.module.css'; // 引入CSS模块样式文件
import img1 from '../message/1.jpg'; // 引入图片资源
import img2 from '../message/2.jpg'; // 引入图片资源
import { FaWifi, FaMobile, FaDesktop, FaSignal } from 'react-icons/fa'; // 引入图标组件
import { useNavigate } from 'react-router-dom';
const Viewer = () => {
  const navigate = useNavigate();
  // 状态管理
  const [viewerCount, setViewerCount] = useState(0); // 观众数量状态
  const videoRef = useRef(null); // 视频元素的引用
  const [peerId, setPeerId] = useState(''); // 当前观众的PeerID
  const peerRef = useRef(null); // Peer实例的引用
  const [danmakuList, setDanmakuList] = useState([]); // 弹幕列表状态
  const [showGiftList, setShowGiftList] = useState(false); // 是否显示礼物列表
  const [giftAnimation, setGiftAnimation] = useState(null); // 当前显示的礼物动画
  const [inputMessage, setInputMessage] = useState(''); // 弹幕输入框内容
  const danmakuRef = useRef(null); // 弹幕容器的引用
  const [deviceType, setDeviceType] = useState('desktop'); // 设备类型状态
  const [networkStatus, setNetworkStatus] = useState('good'); // 网络状态
  const [broadcasterInfo, setBroadcasterInfo] = useState(null); // 主播信息
  const [streamQuality, setStreamQuality] = useState('高清'); // 直播质量状态
  const [isConnected, setIsConnected] = useState(false); // 是否已连接到主播
  // 不再使用状态管理延迟，改为在需要时生成随机延迟
  const streamBufferRef = useRef(null); // 用于存储延迟播放的媒体流

  // 礼物列表数据
  const gifts = [
    { id: 1, name: '鲜花', price: 1, icon: '🌹' },
    { id: 2, name: '火箭', price: 100, icon: '🚀' },
    { id: 3, name: '钻石', price: 500, icon: '💎' },
    { id: 4, name: '皇冠', price: 1000, icon: '👑' },
  ];

  // 检测设备类型
  useEffect(() => {
    // 检测是移动设备还是桌面设备
    const checkDeviceType = () => {
      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
      setDeviceType(isMobile ? 'mobile' : 'desktop');
    };
    
    checkDeviceType();
    
    // 监听窗口大小变化，适配不同屏幕
    const handleResize = () => {
      checkDeviceType();
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  // 监测网络状态
  useEffect(() => {
    const checkNetworkStatus = () => {
      // 使用Navigator.connection API检测网络状态（如果可用）
      if ('connection' in navigator) {
        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
        
        if (connection) {
          const updateNetworkStatus = () => {
            const effectiveType = connection.effectiveType;
            const downlink = connection.downlink;
            
            if (effectiveType === '4g' && downlink > 5) {
              setNetworkStatus('excellent');
            } else if (effectiveType === '4g' || (effectiveType === '3g' && downlink > 1)) {
              setNetworkStatus('good');
            } else {
              setNetworkStatus('poor');
            }
          };
          
          updateNetworkStatus();
          connection.addEventListener('change', updateNetworkStatus);
          return () => connection.removeEventListener('change', updateNetworkStatus);
        }
      }
      
      // 如果API不可用，使用简单的ping测试
      const pingTest = setInterval(() => {
        const start = Date.now();
        fetch('https://www.google.com', { mode: 'no-cors' })
          .then(() => {
            const duration = Date.now() - start;
            if (duration < 100) {
              setNetworkStatus('excellent');
            } else if (duration < 300) {
              setNetworkStatus('good');
            } else {
              setNetworkStatus('poor');
            }
          })
          .catch(() => setNetworkStatus('poor'));
      }, 30000); // 每30秒检测一次
      
      return () => clearInterval(pingTest);
    };
    
    const cleanup = checkNetworkStatus();
    return cleanup;
  }, []);
  
  // 从URL获取主播ID
  const getBroadcasterId = () => {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('id') || 'broadcaster'; // 默认为'broadcaster'
  };

  // 主要副作用Hook，组件挂载时执行
  useEffect(() => {
    const broadcasterId = getBroadcasterId();
    console.log('正在连接到主播:', broadcasterId);
    
    // 获取主机地址（从当前URL）
    const currentHost = window.location.hostname;
    
    // 初始化PeerJS实例
    const peer = new Peer({  
      host: currentHost, // 使用当前主机名，自动适应局域网环境
      port: 9000,   
      path: '/myapp',
      secure: false,
      debug: 3, // 添加调试级别
      config: {
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          { urls: 'stun:stun1.l.google.com:19302' },
          { urls: 'stun:stun2.l.google.com:19302' }
          // 移除TURN服务器，因为在局域网环境下通常不需要
        ]
      }
    });
    
    // 保存peer实例到ref
    peerRef.current = peer;
    
    // 不再需要初始化延迟值检查

    // Peer连接成功回调
    peer.on('open', (id) => {
      setPeerId(id); // 设置当前peerId
      setViewerCount(prevCount => prevCount + 1); // 增加观众计数
      
      // 在peer实例准备就绪后自动连接到主播
      const conn = peer.connect(broadcasterId);
      conn.on('open', () => {
        console.log(`已连接到主播: ${broadcasterId}`);
        setIsConnected(true);
        
        // 发送观众设备信息给主播
        conn.send({
          type: 'viewer_info',
          deviceType: deviceType,
          networkStatus: networkStatus,
          peerId: id
        });
      });
      
      // 错误处理
      conn.on('error', (err) => {
        console.error('连接错误:', err);
        setIsConnected(false);
      });
      
      conn.on('close', () => {
        console.log('与主播的连接已关闭');
        setIsConnected(false);
      });
    });

    // 监听主播的媒体流呼叫
    peer.on('call', (call) => {
      call.answer(); // 必须应答呼叫才能接收流
      call.on('stream', (remoteStream) => {
        // 生成5-10秒的随机延迟
        const randomDelay = Math.floor(Math.random() * 6) + 5; // 5到10之间的随机整数
        console.log(`接收到媒体流，将在随机延迟 ${randomDelay} 秒后播放`);
        
        // 保存媒体流到缓冲区
        streamBufferRef.current = remoteStream;
        
        // 清除之前的延迟定时器（如果存在）
        if (videoRef.current && videoRef.current.dataset.delayTimerId) {
          const oldTimerId = parseInt(videoRef.current.dataset.delayTimerId);
          console.log(`清除旧的延迟定时器: ${oldTimerId}`);
          clearTimeout(oldTimerId);
          delete videoRef.current.dataset.delayTimerId;
        }
        
        // 如果当前正在播放，先暂停
        if (videoRef.current && videoRef.current.srcObject) {
          console.log('暂停当前播放以应用新的媒体流');
          videoRef.current.pause();
          videoRef.current.srcObject = null;
        }
        
        // 设置新的延迟播放定时器
        const timerId = setTimeout(() => {
          console.log(`随机延迟 ${randomDelay} 秒后开始播放视频`);
          if (videoRef.current && streamBufferRef.current) {
            // 应用媒体流并播放
            videoRef.current.srcObject = streamBufferRef.current;
            videoRef.current.play()
              .then(() => console.log('视频开始播放'))
              .catch(e => console.error('播放错误:', e));
          } else {
            console.error('播放失败: 视频元素或媒体流不可用');
          }
        }, randomDelay * 1000); // 转换为毫秒
        
        // 存储定时器ID以便后续清除
        if (videoRef.current) {
          videoRef.current.dataset.delayTimerId = timerId;
          console.log(`设置新的延迟定时器ID: ${timerId}`);
        }
      });

      // 处理ICE候选
      call.peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
          peerRef.current.connections['broadcaster'].forEach(conn => {
            conn.send({
              type: 'ice_candidate',
              candidate: event.candidate
            });
          });
        }
      };
    });

    // 监听主播发送的其他数据(如礼物消息)
    peer.on('connection', (conn) => {
      conn.on('data', (data) => {
        if (data.type === 'gift') {
          // 显示礼物动画
          setGiftAnimation(data.gift);
          // 3秒后自动清除动画
          setTimeout(() => setGiftAnimation(null), 3000);
        } else if (data.type === 'broadcaster_info') {
          // 接收主播设备和网络信息
          setBroadcasterInfo(data);
          setStreamQuality(data.streamQuality);
        } else if (data.type === 'quality_change') {
          // 主播改变了直播质量
          setStreamQuality(data.quality);
        } else if (data.type === 'error') {
          // 主播端发生错误
          console.error('主播端错误:', data.message);
          // 可以在界面上显示错误信息
        }
      });
    });

    // 组件卸载时的清理函数
    return () => {
      if (peerRef.current) {
        peerRef.current.destroy(); // 销毁Peer实例
      }
    };
  }, [deviceType, networkStatus]); // 添加依赖项

  // 连接到主播
  const connectToBroadcaster = () => {
    if (!peerRef.current || !peerId) return;
    
    // 重新连接到主播
    const conn = peerRef.current.connect('broadcaster');
    conn.on('open', () => {
      console.log('已连接到主播');
      setViewerCount(prevCount => prevCount + 1);
      setIsConnected(true);
      
      // 发送观众设备信息给主播
      conn.send({
        type: 'viewer_info',
        deviceType: deviceType,
        networkStatus: networkStatus,
        peerId: peerId
      });
    });
    
    // 错误处理
    conn.on('error', (err) => {
      console.error('连接错误:', err);
      setIsConnected(false);
    });
    
    conn.on('close', () => {
      console.log('与主播的连接已关闭');
      setIsConnected(false);
    });
  };

  // 发送弹幕
  const sendDanmaku = () => {
    if (!inputMessage.trim()) return; // 空消息不发送
    
    // 创建新弹幕对象
    const newDanmaku = {
      id: Date.now(), // 使用时间戳作为唯一ID
      text: inputMessage,
      top: Math.random() * 70 + 10, // 随机垂直位置(10%-80%)
    };
    
    // 添加到弹幕列表
    setDanmakuList(prev => [...prev, newDanmaku]);
    setInputMessage(''); // 清空输入框

    // 发送弹幕到主播
    const conn = peerRef.current.connect('broadcaster');
    conn.on('open', () => {
      conn.send({ 
        type: 'danmaku', 
        text: inputMessage 
      });
    });

    // 8秒后移除该弹幕
    setTimeout(() => {
      setDanmakuList(prev => prev.filter(d => d.id !== newDanmaku.id));
    }, 8000);
  };

  // 发送礼物
  const sendGift = (gift) => {
    // 显示礼物动画
    setGiftAnimation(gift);
    setShowGiftList(false); // 关闭礼物列表
    
    // 发送礼物信息到主播
    const conn = peerRef.current.connect('broadcaster');
    conn.on('open', () => {
      conn.send({ 
        type: 'gift', 
        gift 
      });
    });

    // 3秒后清除礼物动画
    setTimeout(() => {
      setGiftAnimation(null);
    }, 3000);
  };

  // 根据网络状态和设备类型优化视频播放
  useEffect(() => {
    if (videoRef.current && videoRef.current.srcObject) {
      // 根据网络状态调整视频播放质量
      if (networkStatus === 'poor') {
        // 降低视频质量，减少卡顿
        videoRef.current.setAttribute('playsinline', true); // 确保在iOS上内联播放
        videoRef.current.muted = true; // 先静音以确保自动播放
        videoRef.current.play().then(() => {
          // 成功播放后可以取消静音
          videoRef.current.muted = false;
        }).catch(e => console.error('播放错误:', e));
      }
    }
  }, [networkStatus, videoRef.current]);
  
  // 移除监听延迟设置变化的useEffect，因为现在使用随机延迟
  
  // 确保组件卸载时清除所有定时器
  useEffect(() => {
    return () => {
      if (videoRef.current && videoRef.current.dataset.delayTimerId) {
        clearTimeout(parseInt(videoRef.current.dataset.delayTimerId));
      }
    };
  }, []);
  
  // 渲染UI
  return (
    <div className={`${styles.viewerPage} ${deviceType === 'mobile' ? styles.mobilePage : ''}`}>
      {/* 顶部信息栏 */}
      <div className={styles.appContainer}>
        {/* 主播信息区域 */}
        <div className={styles.element1}>
          <div>
            <img src={img1} alt="主播头像" />
          </div>
          <div>
            <span>Z</span>
            <p>{viewerCount} 人观看</p>
          </div>
        </div>

        {/* 预留区域 */}
        <div className={styles.element2}>
          <button onClick={connectToBroadcaster}>连接主播</button>
        </div>

        {/* 其他信息区域 */}
        <div className={styles.element3}>
          <img src={img2} alt="图标" />
          <span>1</span>
        </div>

        {/* 关闭按钮 */}
        <div className={styles.closeButton}>
          <span onClick={()=>navigate('/')}>×</span>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className={styles.broadcasterContainer}>
        <div className={styles.webcamContainer}>
          {/* 视频播放区域 */}
          <video 
            ref={videoRef} 
            controls 
            autoPlay 
            playsInline 
            className={networkStatus === 'poor' ? styles.lowQualityVideo : ''}
          />
          
          {/* 设备类型指示器 */}
          <div className={styles.deviceIndicator}>
            {deviceType === 'mobile' ? <FaMobile /> : <FaDesktop />} {deviceType === 'mobile' ? '移动设备' : '桌面设备'}
          </div>
          
          {/* 网络状态指示器 */}
          <div className={`${styles.networkIndicator} ${styles[networkStatus]}`}>
            <FaWifi /> {networkStatus === 'excellent' ? '极佳' : networkStatus === 'good' ? '良好' : '一般'}
          </div>
          
          {/* 直播质量指示器 */}
          <div className={styles.qualityIndicator}>
            <FaSignal /> {streamQuality}
          </div>
          
          {/* 连接状态指示器 */}
          <div className={`${styles.connectionIndicator} ${isConnected ? styles.connected : ''}`}>
            {isConnected ? '已连接' : '未连接'}
          </div>
          
          {/* 延迟控制器已移除，改为使用随机延迟 */}
          
          {/* 弹幕显示区域 */}
          <div className={styles.danmakuContainer} ref={danmakuRef}>
            {danmakuList.map(danmaku => (
              <div
                key={danmaku.id}
                className={styles.danmaku}
                style={{ top: `${danmaku.top}%` }}
              >
                {danmaku.text}
              </div>
            ))}
          </div>

          {/* 礼物动画 */}
          {giftAnimation && (
            <div className={styles.giftAnimation}>
              <span>{giftAnimation.icon}</span>
            </div>
          )}

          {/* 覆盖文本区域 */}
          <div className={styles.overlayText}>
            欢迎来到直播间！
          </div>
          <div className={styles.overlayText1}>
            <span>小董来了</span>
          </div>
          
          {/* 互动控件区域 */}
          <div className={`${styles.controlsContainer} ${deviceType === 'mobile' ? styles.mobileControls : ''}`}>
            <input
              type="text"
              className={styles.messageInput}
              placeholder="发送弹幕..."
              value={inputMessage}
              onChange={(e) => setInputMessage(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && sendDanmaku()}
            />
            <button className={styles.sendButton} onClick={sendDanmaku}>
              发送
            </button>
            <button className={styles.giftButton} onClick={() => setShowGiftList(!showGiftList)}>
              礼物
            </button>
          </div>

          {/* 礼物列表 */}
          {showGiftList && (
            <div className={styles.giftListContainer}>
              {gifts.map(gift => (
                <div key={gift.id} className={styles.giftItem} onClick={() => sendGift(gift)}>
                  <span className={styles.giftIcon}>{gift.icon}</span>
                  <div className={styles.giftName}>{gift.name}</div>
                  <div className={styles.giftPrice}>{gift.price} 钻石</div>
                </div>
              ))}
            </div>
          )}

          {/* 弹幕输入区域已移至控件区域 */}
        </div>
      </div>
    </div>
  );
};

export default Viewer;